<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>$Title$</title>

    <link href="${request.contextPath}/static/ihomeStatic/css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <link href="${request.contextPath}/static/ihomeStatic/css/font-awesome.min.css" rel="stylesheet">
    <link href="${request.contextPath}/static/ihomeStatic/css/animate.min.css" rel="stylesheet" type="text/css">
    <link href="${request.contextPath}/static/ihomeStatic/css/plugins/jqgrid/ui.jqgrid.css" rel="stylesheet" type="text/css"/>
    <link href="${request.contextPath}/static/ihomeStatic/css/style.min.css" rel="stylesheet">
    <link href="${request.contextPath}/static/ihomeStatic/js/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">
    <link href="${request.contextPath}/static/ihomeStatic/css/demo.css" rel="stylesheet">
    <link href="${request.contextPath}/static/ihomeStatic/css/zTreeStyle/zTreeStyle.css" rel="stylesheet">
    <script src="${request.contextPath}/static/ihomeStatic/js/jquery-2.1.1.min.js"></script>
    <script src="${request.contextPath}/static/ihomeStatic/js/jquery.ztree.core.js"></script>


    <script src="${request.contextPath}/static/ihomeStatic/js/bootstrap.min.js"></script>
    <script src="${request.contextPath}/static/ihomeStatic/js/plugins/metisMenu/jquery.metisMenu.js" type="text/javascript"></script>
    <script src="${request.contextPath}/static/ihomeStatic/js/plugins/slimscroll/jquery.slimscroll.min.js" type="text/javascript"></script>
    <script src="${request.contextPath}/static/ihomeStatic/js/layer/layer.js"></script>
    <!-- Custom and plugin javascript -->
    <script src="${request.contextPath}/static/ihomeStatic/js/contabs.min.js" type="text/javascript"></script>
    <script src="${request.contextPath}/static/ihomeStatic/js/plugins/jqGrid/grid.locale-cn.js"></script>
    <script src="${request.contextPath}/static/ihomeStatic/js/plugins/jqGrid/jquery.jqGrid.min.js"></script>
    <script src="${request.contextPath}/static/ihomeStatic/js/bootstrap-table/bootstrap-table.min.js"></script>
    <script src="${request.contextPath}/static/ihomeStatic/js/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>
    <script type="text/javascript" src="${request.contextPath}/static/ihomeStatic/js/jquery.ztree.excheck.min.js"></script>
</head>
<body class="fixed-sidebar full-height-layout">
<body class="gray-bg">
<div class="wrapper">
    <div class="row">
        <div class="ibox">
            <div class="ibox-content">
                <div id="assignRole" class="row wrapper wrapper-content">
                    <div class="col-sm-4" style="border-right: 1px solid #A8A8A8;">
                        <p>所在部门：</p>
                        <div id="officeTree" class="ztree"></div>
                    </div>
                    <div class="col-sm-4">
                        <p>待选人员：</p>
                        <div id="userTree" class="ztree"></div>
                    </div>
                    <div class="col-sm-4" style="padding-left:16px;border-left: 1px solid #A8A8A8;">
                        <p>已选人员：</p>
                        <div id="selectedTree" class="ztree"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div style="text-align: right;float:right;" >
    <button type="button" class="btn btn-primary" id="enter" >确定</button>
    <button type="button" class="btn btn-default" id="cancel">取消</button>
</div>
<input type="hidden" id="ids" value="${id}">
</body>
</body>
<script>

    var setting = {

        check: {
            enable: true
        },
        view: {
            showIcon: true
        },
        callback:{
            onClick:zTreeOnClick
        },
        data: {
            simpleData: {
                enable: true,
                pIdKey:'pid'
            }
        }
    };
    var Dsetting = {

        data: {
            simpleData: {
                enable: true
            }
        },
        callback:{
            onClick:userTreeOnClick
        }
    };

    var Ysetting = {

        data: {
            simpleData: {
                enable: true
            }
        },
        callback:{
            onClick:selectedTreeClick
        }
    };

    function filter(treeId, parentNode, childNodes) {
        if (!childNodes) return null;
        for (var i = 0, l = childNodes.length; i < l; i++) {
            childNodes[i].name = childNodes[i].name.replace(/\.n/g, '.');
        }
        return childNodes;
    }
    var pre_ids;
    var rIds = new Array();
    var uids = new Array();
    var ids = new Array();

    $(document).ready(function () {
        //加载部门树
        $.ajax({
            url: "${request.contextPath}/roleManage/deptTree",
            data:{id:$("#ids").val()},
            success: function (data) {
                $.fn.zTree.init($("#officeTree"), setting, data);
            },
            error: function (data) {
            }
        });
        //加载已选员工
        var selectedNodes =[
            <#if ssoUserList ??>
                <#list ssoUserList as list>
                    {id:"${list.userId}",
                        pId:"0",
                        name:"${list.userName}"
                    },
                </#list>
            </#if>
    ];
        <#if ssoUserList ??>
            <#list ssoUserList as list>
                rIds.push('${list.userId}');
            </#list>
        </#if>
        pre_ids = rIds;
        selectedTree = $.fn.zTree.init($("#selectedTree"), Ysetting, selectedNodes);



    });

    //点击获取id
    function zTreeOnClick(event, treeId, treeNode, clickFlag) {
        var departmentId = treeNode.id;
        if (treeNode.level) {//区域层级
            departmentId = treeNode.id;
            departmentName = treeNode.name;
            $.ajax({
                url:"${request.contextPath}/roleManage/toSelected",
                type:"GET",
                data:{id:$("#ids").val()},
                success:function (data) {
                    if (data){
                        ids=data;
                        $.fn.zTree.init($("#userTree"), Dsetting, data);
                    }
                }
            })
        }  else {
            //异常
            return;
        }
    }


    function userTreeOnClick(event, treeId, treeNode, clickFlag) {
        var userTreeId = treeNode.id;
        var userTreeName = treeNode.name;
        // console.log(userTreeId);
        var count = 0;
        for(var i = 0;i<rIds.length;i++){
            console.log(rIds[i]);
            if(userTreeId!=rIds[i]){
                count++;
            }
        }
        if (count==rIds.length){
            if($.inArray(treeNode.id, ids)<=0){
                selectedTree.addNodes(null, treeNode);
                ids.push(treeNode.id);
                uids.push(treeNode.id)
            }else {
                layer.msg('只可添加一次', {icon: 2});
            }
        }

    }
    function selectedTreeClick(event, treeId, treeNode, clickFlag) {
        var selectId = treeNode.id;
        var selectName = treeNode.name
        console.log(selectId)
        if("selectedTree"==treeId){
            if($.inArray(treeNode.id, pre_ids)<0){
                selectedTree.removeNode(treeNode);
                ids.splice($.inArray(treeNode.id, ids), 1);
            }else{
                layer.msg('角色原有成员不能清除', {icon: 2});
            }
        }
        ;
        //异常
    }
    $("#enter").click(function () {
        if (uids.length==0){
            layer.msg('未选择要分配的员工', {icon: 2});
        }else{
            $.ajax({
                url:"${request.contextPath}/roleManage/addUser",
                type:"get",
                data:{userId:uids.toString(),roleId:$("#ids").val()},
                success:function (data) {
                    if (data){
                        var index = parent.layer.getFrameIndex(window.name);
                        parent.$("#h1").val("1");
                        parent.layer.close(index);//关闭当前页
                    }
                }
            });
        }



    });
    $("#cancel").click(function () {

        var index = parent.layer.getFrameIndex(window.name);
        parent.layer.close(index);//关闭当前页

    });
    </script>
</html>
